<!--<template>-->
<!--  <div>-->
<!--    &lt;!&ndash; banner &ndash;&gt;-->
<!--    <div class="banner" :style="cover">-->
<!--      <h1 class="banner-title">相册</h1>-->
<!--    </div>-->
<!--    &lt;!&ndash; 相册内容 &ndash;&gt;-->
<!--    <v-card class="blog-container">-->
<!--      <v-row>-->
<!--        <v-col :md="6" v-for="item of photoAlbumList" :key="item.id">-->
<!--          <div class="album-item">-->
<!--            <v-img class="album-cover" :src="item.cover" />-->
<!--            <router-link :to="'/albums/' + item.id" class="album-wrapper">-->
<!--              <div class="album-name">{{ item.name }}</div>-->
<!--              <div class="album-desc">{{ item.description }}</div>-->
<!--            </router-link>-->
<!--          </div>-->
<!--        </v-col>-->
<!--      </v-row>-->
<!--    </v-card>-->
<!--    &lt;!&ndash; 分页按钮 &ndash;&gt;-->
<!--      <v-pagination-->
<!--        color="#00C4B6"-->
<!--        v-model="current"-->
<!--        :length="Math.ceil(count / size)"-->
<!--        total-visible="size"-->
<!--      />-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import albumApi from '../../api/album';-->
<!--export default {-->
<!--  created() {-->
<!--    this.fetchData();-->
<!--  },-->
<!--  metaInfo:{-->
<!--    meta: [{-->
<!--      name: 'keyWords',-->
<!--      content: "西瓜博客,开源博客,www.r2blog.cn"  //变量或字符串-->
<!--    }, {-->
<!--      name: 'description',-->
<!--      content: "一个专注于技术分享的博客平台,大家以共同学习,乐于分享,拥抱开源的价值观进行学习交流"-->
<!--    }]-->
<!--  },-->
<!--  data: function() {-->
<!--    return {-->
<!--      photoAlbumList: [],-->
<!--      size: 8,-->
<!--      current: 1,-->
<!--      count: 0-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    fetchData() {-->
<!--      const param = {-->
<!--        current : this.current, size : this.size-->
<!--      }-->
<!--      albumApi.albumList(param).then(res => {-->
<!--        if (res.code === 200) {-->
<!--          this.photoAlbumList = res.data.albumRespVos;-->
<!--          this.count = res.data.total;-->
<!--        }-->
<!--      })-->
<!--    }-->
<!--  },-->
<!--  watch: {-->
<!--    current(value) {-->
<!--      this.current = value;-->
<!--      this.fetchData();-->
<!--    }-->
<!--  },-->
<!--  computed: {-->
<!--    cover() {-->
<!--      const cover = "https://98k-hk666.oss-cn-shanghai.aliyuncs.com/iblog/img/admin/233154-15779791144569.jpg?versionId=CAEQQRiBgICtxoj5lRgiIDY2MDQxNGMyYmU0MzQ0OWI4ZDlmZjExMjNhMDc2ZDFm";-->
<!--      return "background: url(" + cover + ") center center / cover no-repeat";-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.album-item {-->
<!--  overflow: hidden;-->
<!--  position: relative;-->
<!--  cursor: pointer;-->
<!--  background: #000;-->
<!--  border-radius: 0.5rem !important;-->
<!--}-->
<!--.album-cover {-->
<!--  position: relative;-->
<!--  max-width: none;-->
<!--  width: calc(100% + 1.25rem);-->
<!--  height: 250px;-->
<!--  opacity: 0.8;-->
<!--  transition: opacity 0.35s, transform 0.35s;-->
<!--  transform: translate3d(-10px, 0, 0);-->
<!--  object-fit: cover;-->
<!--}-->
<!--.album-wrapper {-->
<!--  position: absolute;-->
<!--  top: 0;-->
<!--  bottom: 0;-->
<!--  left: 0;-->
<!--  right: 0;-->
<!--  padding: 1.8rem 2rem;-->
<!--  color: #fff !important;-->
<!--}-->
<!--.album-item:hover .album-cover {-->
<!--  transform: translate3d(0, 0, 0);-->
<!--  opacity: 0.4;-->
<!--}-->
<!--.album-item:hover .album-name:after {-->
<!--  transform: translate3d(0, 0, 0);-->
<!--}-->
<!--.album-item:hover .album-desc {-->
<!--  opacity: 1;-->
<!--  filter: none;-->
<!--  transform: translate3d(0, 0, 0);-->
<!--}-->
<!--.album-name {-->
<!--  font-weight: bold;-->
<!--  font-size: 1.25rem;-->
<!--  overflow: hidden;-->
<!--  padding: 0.7rem 0;-->
<!--  position: relative;-->
<!--}-->
<!--.album-name:after {-->
<!--  position: absolute;-->
<!--  bottom: 0;-->
<!--  left: 0;-->
<!--  width: 100%;-->
<!--  height: 2px;-->
<!--  background: #fff;-->
<!--  content: "";-->
<!--  transition: transform 0.35s;-->
<!--  transform: translate3d(-101%, 0, 0);-->
<!--}-->
<!--.album-desc {-->
<!--  margin: 0;-->
<!--  padding: 0.4rem 0 0;-->
<!--  line-height: 1.5;-->
<!--  opacity: 0;-->
<!--  transition: opacity 0.35s, transform 0.35s;-->
<!--  transform: translate3d(100%, 0, 0);-->
<!--}-->
<!--</style>-->
